<template>
	<div class="msg-page">
		<div class="nav-back" @click="goBack">
		    <i class="el-icon-arrow-left"></i>
		</div>
		<div class="marg-T2">
			<div class="flex f-mi f-be marg-B1">
				<div class="fs-18" style="font-weight: 700;">消息中心</div>
				<div @click="allMsgClick" style="cursor: pointer;">
					<i class="el-icon-bell" style="margin-right: 5px;"></i>
					<span>全部已读</span>
				</div>
			</div>
			<div class="msg-list">
				<div class="items flex" v-for="(item,index) in listData" :key="index">
					<div class="right" @click="detailClick(item)">
						<div class="flex f-be">
							<div class="txt" :style="item.is_read == 1 ? 'color:#808080;':'color:#000;'">
								<span style="font-size: 10px;margin-right:10px;">●</span>
								{{item.affiche_title}}
							</div>
							<div class="t-eight">
								<span>{{item.create_time}}</span>
							</div>
						</div>
						<div class="t-eight fs-13">
							{{item.content}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import mixin from '@/assets/js/mixin'
	import { request } from "@/assets/js/utils/request"
	export default {
		mixins: [mixin],
		data() {
			return {
				listData: []
			}
		},
		created() {
			this.initData()
		},
		methods: {
			allMsgClick() {
				request({
					url: '/user/affiche/readall',
					method: 'POST'
				}).then(res => {
					if(res.code == 200) {
						this.$message({
							message: '全部已读',
							type: 'success'
						})
						this.initData()
					}
				})
			},
			detailClick(params) {
				const formData = new FormData();
				formData.append('affiche_id',params.affiche_id)
				request({
					url: '/user/affiche/read',
					method: 'POST',
					data: formData
				}).then(res => {
					if(res.code == 200) {
						this.$message({
							message: '已读',
							type: 'success'
						})
						this.initData()
					}
				})
			},
			initData() {
				request({
					url: '/user/affiche/list',
					method: 'GET'
				}).then(res => {
					if(res.code == 200) {
						this.listData = res.data.list || []
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.msg-page{
		padding: 30px;
		background: #fff;
		.msg-list{
			// width: 600px;
			// margin: 0 auto;
			.items{
				margin-bottom: 20px;
				padding: 12px;
				border-radius: 6px;
				border: 1px solid rgba(245, 245, 245, 1);				
				.right{
					cursor: pointer;
					flex: 1;
					padding-left: 20rpx;
				}
				.txt{
					font-size: 16px;
					font-weight: 700;
					margin-bottom: 21px;
				}
				.detail{
					margin-top: 21px;
					padding-top: 21px;
					border-top: 1px solid #E5E5E5;
					font-size: 28rpx;
					color: #00BAAD;
				}
			}
		}
	}
</style>